<template>
    <div class="blog">
        <van-tabs v-model:active="active" @change="change">
            <van-tab title="代码人生" :name="1">
                <van-loading vertical v-if="loading" />
                <Card v-else :data="articleList" @click="goToDetail" />
            </van-tab>
            <van-tab title="生活日常" :name="2">
                <van-loading vertical v-if="loading" />
                <Card v-else :data="articleList" @click="goToDetail" />
            </van-tab>
            <van-tab title="小说畅想" :name="3">
                <van-loading vertical v-if="loading" />
                <Card v-else :data="articleList" @click="goToDetail" />
            </van-tab>
            <van-tab title="其他" :name="4">
                <van-loading vertical v-if="loading" />
                <Card v-else :data="articleList" @click="goToDetail" />
            </van-tab>
        </van-tabs>
    </div>

</template>
<script setup lang="ts">
import { ref } from 'vue';
import Card from '../components/Card.vue';
import { onMounted } from 'vue';
import { getBlogArticle } from '../api';

import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
import { useTabIndexStore } from '@/stores/counter';
const counter = useTabIndexStore();

interface IDataModal {
    id: string;
    title: string;
    author: string;
    content: string;
    cover: string;
    type: number;
    status: number;
    createTime: string;
    recentReadingTime: number;
}
interface IResultModal {
    code: number;
    data: IDataModal[];
}

const active = ref(1);
const articleList = ref<IDataModal[]>([]);
const loading = ref(false);

const getArticle = (type: number) => {
    loading.value = true;
    getBlogArticle(type).then(res => {
        if (res.code === 1) {
            loading.value = false;
            articleList.value = res.data;
        }
    })
}

const change = (name: string | number, title: string) => {
    counter.setTabIndex(name as number);
    getArticle(name as number);
}

const goToDetail = (item: IDataModal) => {
    router.push({
        path: '/blogDetail',
        query: { id: item.id }
    })
}
onMounted(() => {
    active.value = counter.tabIndex;
    getArticle(active.value);
})
</script>
<style scoped>
.blog {
    padding: 0 1rem 3.1rem 1rem;
}

.card {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.card .item {
    width: 50%;
    padding: 1rem;
}

.card .item img {
    width: 100%;
    height: 10rem;
    border-radius: 0.5rem;
}

.card .item .title {
    font-size: 0.9rem;
}

.card .item .author {
    font-size: 0.7rem;
    color: #999;
}
</style>